<template>
	<view class="container">
		<tabs class="tabs" :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
		<view class="list" v-if="curIndex === 0">
			<!-- 快速获取 -->
			<view class="item">
				<view class="left">
					<view class="title">
						快速获取缘分值
					</view>
					<view class="subTitle">
						开通vip获取缘分值，根据vip等级不同获取相应的缘分值
					</view>
				</view>
				<view class="button" @click="goTo('pages/membership/membership')">
					去开通
				</view>
			</view>
			<!-- 注册 -->
			<view class="item">
				<view class="left">
					<view class="title">
						注册
					</view>
					<view class="subTitle">
						通过自动奖励缘分值，100缘分值/人
					</view>
				</view>
				<view class="button" @click="goTo('pages/register/register')">
					去完成
				</view>
			</view>
			<!-- 邀请伙伴 -->
			<view class="item">
				<view class="left">
					<view class="title">
						邀请小伙伴
					</view>
					<view class="subTitle">
						每成功要求一位小伙伴并完善信息，奖励100缘分值
					</view>
				</view>
				<!-- <button class="button" open-type="share" > -->
				<button class="button" @click="getInviteCode">
					去邀请
				</button>
			</view>
			<!-- 宣传 -->
			<view class="item">
				<view class="left">
					<view class="title">
						宣传缘诉
					</view>
					<view class="subTitle">
						通过在其他平台宣传缘诉，提交链接，根据宣传热度获取相应的缘分值
					</view>
				</view>
				<view class="button" @click="goTo('pages/advertise/advertise')">
					去宣传
				</view>
			</view>
			<!-- 首次体验 -->
			<!-- <view class="item">
				<view class="left">
					<view class="title">
						首次体验树洞
					</view>
				</view>
				<view class="button" @click="goTo('pages/tabBar/treeHollow/treeHollow',1)">
					去体验
				</view>
			</view> -->
			<!-- 发布树洞 -->
			<view class="item">
				<view class="left">
					<view class="title">
						发布树洞优质话题
					</view>
					<view class="subTitle">
						发布优质话题，后台定期筛选热门树洞，奖励相应的缘分值
					</view>
				</view>
				<view class="button" @click="goTo('pages/newPost/newPost')">
					去发布
				</view>
			</view>
			<!-- 参与树洞话题讨论 -->
			<view class="item">
				<view class="left">
					<view class="title">
						参与树洞话题讨论
					</view>
					<view class="subTitle">
						每天评论奖励上限5点缘分值，一条一点。乱评论者会被处罚
					</view>
				</view>
				<view class="button" @click="goTo('pages/tabBar/treeHollow/treeHollow',1)">
					去讨论
				</view>
			</view>
			<!-- 每日签到 -->
			<view class="item">
				<view class="left">
					<view class="title">
						每日签到
					</view>
					<view class="subTitle">
						根据每日摇签结果获取相应的缘分值
					</view>
				</view>
				<view class="button" @click="goTo('pages/tabBar/Home/Home',1)">
					去签到
				</view>
			</view>
			<!-- 实名认证 -->
			<view class="item">
				<view class="left">
					<view class="title">
						实名认证
					</view>
					<view class="subTitle">
						实名认证完成，奖励100缘分值。一次性奖励
					</view>
				</view>
				<view class="button" @click="goTo('pages/realnameVerify/realnameVerify')">
					去认证
				</view>
			</view>
			<!-- 完善资料 -->
			<view class="item">
				<view class="left">
					<view class="title">
						完善资料
					</view>
					<view class="subTitle">
						完善详细资料提交后，获取30点缘分值
					</view>
				</view>
				<view class="button" @click="goTo('pages/personalEdit/personalEdit')">
					去完善
				</view>
			</view>
			<!-- 朋友圈集赞 -->
			<view class="item">
				<view class="left">
					<view class="title">
						朋友圈集赞
					</view>
					<view class="subTitle">
						将本产品发布朋友圈，根据点赞数量，2个赞奖励1点缘分值
					</view>
				</view>
				<view class="button" @click="goTo('pages/advertise/advertise')">
					去发布
				</view>
			</view>
			<!-- 举报 -->
			<view class="item">
				<view class="left">
					<view class="title">
						举报
					</view>
					<view class="subTitle">
						举报对方信息不实，或违反平台公约。一经核实，奖励200缘分值
					</view>
				</view>
				<view class="button" @click="showReportTip">
					去举报
				</view>
			</view>

		</view>
		<view class="list" v-else>
			<!-- 解锁在线聊天功能 -->
			<view class="item">
				<view class="left">
					<view class="title">
						解锁在线聊天功能
					</view>
					<view class="subTitle">
						20点缘分值/位
					</view>
				</view>
			</view>
			<!-- 申请查看自己的访客列表 -->
			<view class="item">
				<view class="left">
					<view class="title">
						申请查看自己的访客列表
					</view>
					<view class="subTitle">
						5点缘分值/位，需对方同意后可获取
					</view>
				</view>
			</view>
			<!-- 申请查看对方的私密相册 -->
			<view class="item">
				<view class="left">
					<view class="title">
						申请查看对方的私密相册
					</view>
					<view class="subTitle">
						50点缘分值/位，需对方同意后可获取
					</view>
				</view>
			</view>
			<!-- 申请获取对方的联系方式 -->
			<view class="item">
				<view class="left">
					<view class="title">
						申请获取对方的联系方式
					</view>
					<view class="subTitle">
						100点缘分值/位，需对方同意后可获取
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import tabs from '@/components/liuyuno-tabs/liuyuno-tabs.vue'
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	export default {
		components: {
			tabs: tabs
		},
		data() {
			return {
				defaultIndex: 0,
				curIndex: 0,
				tabs: [
					'缘分值获取',
					'缘分值用途'
				]
			};
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '我正在使用缘诉交友，快来和我成为好友吧~',
				path: `/pages/tabBar/Home/Home`
			}
		},
		methods: {
			showReportTip() {
				alert('温馨提示： 若您在使用本平台或者交友过程中，发现对方有违反本平台公约的，请及时举报!')
			},
			getInviteCode() {
				request(url.getInviteCode, 'GET').then(res => {
					if (res.status === 200) {
						uni.showModal({
							cancelText: '取消',
							confirmText: '复制链接',
							success: () => {
								const clipboardObj = navigator.clipboard;
								clipboardObj.writeText(
									`https://app.52yinyuan.com/pages/login/login?inviteCode=${res.data}`
								);
							},
							content: `如果您身边有单身的朋友还没有遇到心动对象，请把他们都邀请来诉缘，这样诉缘的资源也会越来越多。单丝不成线，独木不成林，一人难成事，齐心可脱单。邀请成功后，您将获得100缘分值并且提升5点真诚指数/位，您的邀请码是${res.data}。链接：https://app.52yinyuan.com/pages/login/login?code=${res.data}`
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			tabClick(val) {
				this.curIndex = val;
			},
			goTo(link, type) {
				// console.log(link)
				// debugger 
				if (type) {
					uni.switchTab({
						url: '/' + link
					})
				}
				uni.navigateTo({
					url: '/' + link,
					// url:'/pages/tabBar/treeHollow/treeHollow'
				})
			},
			goToShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用缘诉交友，快来和我成为好友吧~",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
	}

	.tabs {
		/deep/ .uni-scroll-view-content {
			font-size: 17px;
		}
	}

	.list {
		padding: 10px;
	}

	.item {
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-top: 1px solid #dcdcdc;

		.title {
			font-size: 13px;
			color: #101010;
		}

		.title::before {
			content: "|";
			margin-right: 3px;
			color: #FC9380;
			font-weight: bold;
		}

		.subTitle {
			font-size: 8px;
			color: #888888;
			margin-top: 5px;
			max-width: 90%;
		}

		.button {
			flex-shrink: 0;
			width: fit-content;
			border: 1px solid #FC9380;
			border-radius: 100px;
			color: #FC9380;
			font-size: 10px;
			padding: 2px 4px;
			background-color: transparent;
			line-height: 1.5;

			&::after {
				border: none;
			}
		}

		.left {
			width: 90%;
		}
	}
</style>
